<template>
<div>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px">

    <el-form-item label="产品名称" prop="productid" required>
      <el-select v-model="ruleForm.productid" placeholder="请选择订购产品">
        <el-option v-for="pname in this.productnames" :label="pname.productname" :value="pname.id"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="需求数量" prop="num" required style="width: 315px;">
      <el-input v-model="ruleForm.num"></el-input>
    </el-form-item>

    <el-form-item label="交付日期" required style="width: 570px">
      <el-col :span="11">
        <el-form-item prop="deliverydate">
          <el-date-picker v-model="ruleForm.deliverydate" placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item label="投标截止" required style="width: 570px">
      <el-col :span="11">
        <el-form-item prop="tenderdate">
          <el-date-picker v-model="ruleForm.tenderdate" placeholder="选择日期" style="width: 100%;" type="date"></el-date-picker>
        </el-form-item>
      </el-col>
    </el-form-item>

    <el-form-item label="收货人" prop="receiver" required style="width: 315px;">
      <el-input v-model="ruleForm.receiver"></el-input>
    </el-form-item>

    <el-form-item label="联系方式" prop="connection" required style="width: 315px;">
      <el-input v-model="ruleForm.connection"></el-input>
    </el-form-item>

    <el-form-item label="收货地址" prop="address" required style="width: 315px;">
      <el-input v-model="ruleForm.address"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>

  </el-form>
</div>
</template>

<script>
export default {
  data() {
    return {
      productnames:null,
      ruleForm: {
        productid:null,
        num:null,
        deliverydate:null,
        tenderdate:null,
        receiver:null,
        connection:null,
        address:null,
        userid:this.$store.state.user.id,
      },
      rules: {
        productname: [
          { required: true, message: '请选择订购产品!', trigger: 'blur' },
        ],
        num: [
          { required: true, message: '请输入订购数量!', trigger: 'blur' },
        ],
        deliverydate: [
          { type: 'date', required: true, message: '请选择交付日期!', trigger: 'change' }
        ],
        tenderdate: [
          { type: 'date', required: true, message: '请选择投标截止时间!', trigger: 'change' }
        ],
        receiver: [
          { required: true, message: '请输入收货人!', trigger: 'blur' },
        ],
        connection: [
          { required: true, message: '请输入收货人联系方式!', trigger: 'blur' },
        ],
        address: [
          { required: true, message: '请输入收货人地址!', trigger: 'blur' },
        ],
      }
    };
  },created() {
    axios.get('http://localhost:8081/order/getProductname').then(
        (response) => {
          this.productnames = response.data;
        }
    );
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('http://localhost:8081/order/add',this.ruleForm).then((response)=>{
            if(response.data == "success"){
              this.$router.push("/dealerorderlist");
              this.success();
            }else{
              this.failed();
            }
          });

        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    success() {
      this.$message({
        message: '添加成功!',
        type: 'success'
      });
    },
    failed() {
      this.$message.error('添加失败，请检查内容是否正确或稍后再试!');
    },

  }
}
</script>